<template>
  <div class="page-box">
    <div class="flex-left">
      <WangGeMianJi :result="result"></WangGeMianJi>
      <zheng-gai-pai-hang :id="rankingid" />
    </div>

    <div class="flex-right">
      <ZuiXinAnJian v-if="scrollData.length" :classOption="classOption" :scrollData="scrollData"></ZuiXinAnJian>
      <ShuJuTongJi :result="result"></ShuJuTongJi>
    </div>

    <!-- 选择街办 -->
    <div class="postion_reletive">
      <el-select @change="selectStreet" v-model="streetId" :popper-append-to-body="false">
        <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
        </el-option>
      </el-select>
    </div>
  </div>
</template>

<script>
import ShuJuTongJi from "./components/ShuJuTongJi.vue"; //数据统计
import {
  YingPanShiDian,
  getDangQianJieDaoList,
  getZuiXinAnJianList,
  getStatisticsLists,
  getScreenStreetDataAPI
} from "@/api"; //接口
import WangGeMianJi from "./components/WangGeMianJi.vue"; // 网格面积
import Bus from "@/untils/bus";
import ZuiXinAnJian from "./components/ZuiXinAnJian.vue";
import ZhengGaiPaiHang from "./components/ZhengGaiPaiHang.vue"; //本年度案件类型排行

export default {
  components: {
    WangGeMianJi,
    ShuJuTongJi,
    ZuiXinAnJian,
    ZhengGaiPaiHang,
  },
  name: "ZhiHuiJIeXiang",
  data() {
    return {
      list: "",
      streetList: [],
      street: "",
      result: {},
      options: [
        {
          value: 0,
          label: "",
        },
      ],
      // 最新案件
      classOption: {
        singleHeight: 160,
        direction: 1,
      },
      scrollData: [],
      streetId: "1298860969509908481", //id
      rankingid: "1298860969509908481", //排行榜ID
    };
  },

  mounted() {
    this.streetId = '1298860969509908481';
    this.getStatisticsLists();
    this.getViDeviceStreet();
    this.getZuiXinAnJianList();
  },

  methods: {
    // 街办列表
    async getViDeviceStreet() {
      const res = await getDangQianJieDaoList();
      this.options = res.data;
      // this.streetId = '1298860969509908481';
    },

    // 选择街办,社区
    selectStreet(value) {
      this.scrollDatab = [];
      this.rankingid = value;
      this.getZuiXinAnJianList();
      this.getStatisticsLists();
      this.options.forEach((item) => {
        if (value == item.id) {
          Bus.$emit("SelectStreet", item);
        }
      });
    },

    //获取数据统计
    getStatisticsLists() {
      this.result = {};
      const parmas = {
        streetId: this.rankingid,
      };
      getStatisticsLists(parmas).then((res) => {
        getScreenStreetDataAPI(parmas).then(({ success, data, message }) => {
          if (success) {
            this.result = { ...res.data, storeNum: data.storeNum, dustNum: data.dustNum, monitoringNum: data.monitoringNum, assemblyNum: data.assemblyNum, regionArea: data.regionArea, dataCount: data.gridNum, communityCount: data.communityNum, userNum: data.userNum };
            // 营盘
            if (this.rankingid == '1286564239652724737') {
              this.result.monitoringCount = 16;
              this.result.dustCount = 15
            }
            // 北营
            if (this.rankingid == '1298860969509908481') {
              this.result.constructionCount = 16
              this.result.monitoringCount = 257
              this.result.dustCount = 28
            }
            console.log(this.result, 'this.result');
          } else {
            this.$message.error(message)
          }
        })
      });
    },

    //获取排行榜(柱状图)
    getZuiXinAnJianList() {
      getZuiXinAnJianList({ streetId: this.streetId }).then((res) => {
        this.scrollData = res.data;
      });
    }
  },
};
</script>

<style lang="less" scoped>
.anjianzhanbi {
  width: auto;
  height: auto;
  left: 550px;
  right: 550px;
  bottom: 0;
  padding: 0;
  display: flex;
  justify-content: space-around;

  div {
    &:nth-child(1) {
      width: 258px;
      height: 355px;
      padding: 25px;
      background: url("../../assets/images/yingpanshidian/wanggeyuan.png") no-repeat;
      background-size: 100% 100%;
    }

    &:nth-child(2) {
      width: 538px;
      height: 355px;
      padding: 25px;
      background: url("../../assets/images/yingpanshidian/jinyizhou.png") no-repeat;
      background-size: 100% 100%;
    }
  }
}

.postion_reletive {
  width: 250px;
  position: relative;
  left: 550px;
  top: 0px;

  /deep/ .el-input__inner {
    padding-left: 20px;
    width: 200px;
    height: 44px;
    background: rgba(4, 11, 32, 0.7);
    border: 1px solid #16d0ff;
    box-shadow: 0px 0px 19px 1px #173c90;
    border-radius: 8px;
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
    opacity: 0.7;
  }

  // /deep/ .el-icon-arrow-up:before {
  //   content: "";
  //   background: url("../../assets/images/yingpanshidian/sanjiao.png") center center no-repeat;
  //   background-size: 10px 8px;
  //   position: absolute;
  //   width: 100%;
  //   height: 100%;
  //   top: 50%;
  //   left: 80%;
  //   transform: translate(-80%, -50%) rotate(180deg);
  // }
}

/deep/.el-scrollbar {
  min-height: 450px;

  .el-select-dropdown__wrap {
    min-height: 450px;
  }

  .el-scrollbar__bar {
    display: none;
  }

  ::-webkit-scrollbar-track {
    display: none;
  }
}
</style>
